<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="icon " href="icon/favicon.ico">

    <!--css代码-->
    <link href="css/market.css" rel="stylesheet" type="text/css">
    <!--jquery库-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--js代码-->
    <script src="js/common.js" type="text/javascript"></script>
</head>
<body>
<div class="infodiv">
    <img class="success" src="icon/完成.png">
    <br>
    <p>加入购物车成功！</p>
    <a class="cancel"><input type="button" style="float: left;margin-left: 30px;" value="继续购物"></a>
    <a href="shopcar.html"><input type="button" style="float: right;margin-right: 30px;" value="前往购物车"></a>
</div>
<div class="infodiv-1">
    <img class="success" src="icon/未登录-头像.png">
    <br>
    <p style="text-align: center">您当前未登录！</p>
    <a class="cancel"><input type="button" style="float: left;margin-left: 30px;" value="继续浏览"></a>
    <a href="login.html"><input type="button" style="float: right;margin-right: 30px;" value="前往登录"></a>
</div>
<div >
    <div class="headerBar">
        <div class="topBar">
            <div class="comWidth">
                <div class="leftArea">
                    <a id='hello' target="_blank" href="login.html" class="link-login">您好，<span>请登录</span></a>&nbsp;&nbsp;
                    <a id='hello2' target="_blank" href="registe.html" class="link-regist style-red">免费注册</a>
                </div>
                <div class="rightArea">

                    <ul class="fr">
                        <span class="fore1" ><a target="_blank" href="shopcar.html" style="text-align: center"><img class='shopCar' src="icon/shopCar.png">购物车</a></span>
                        <span class="fore1" ><a target="_blank" href="order.html">我的订单</a></span>
                        <span class="fore1" ><a href="account.html">个人中心</a></span>
                    </ul>
                </div>
            </div>
        </div><!--topBar结束-->
        <div class="logoBar">
            <div class="comWidth">
                <div class="logo fl">
                    <a href="#"><img class='company_logo'src="images/logo.jpg" alt="XX网"/></a>
                </div>
                <div class="searchBox fl">
                    <input type="text" class="search_text fl" id="key">
                    <!--<input type="submit" value="搜索" class="search_btn fr"/>-->
                    <button class='search_btn'onclick="search('key')">搜索</button>
                    <!--<input clstag="h|keycount|head|search_a" type="text" onkeydown="javascript:if(event.keyCode==13) search('key');" autocomplete="off" id="key" accesskey="s" class="text" />-->
                    <!--<button clstag="h|keycount|head|search_c" onclick="search('key');return false;" class="button"><i class="iconfont">&#xe603;</i></button>-->
                </div>
            </div>
        </div><!--logoBar结束-->
    </div>

    <div class="shopinfo">
        <div class="shopname">
            <a id="shopnamespan" href=#  title="进店看看">XX图书旗舰店</a>
        </div>
    </div>

    <div class="shoplogo">
        <a href=#><img id='shoplogopic' src="images/shoplogo.jpg">进店逛逛</a>
    </div>

    <div class="description_info">
        <div class="description clearfix">
            <div class="leftArea">
                <div class="description_imgs">
                    <div class="big">
                        <img src="images/计算机网络/计算机网络.jpg" alt="">
                    </div>
                    <ul class="des_smimg">
                        <li><a href="#"><img src="images/计算机网络/计算机网络.jpg" class="active" alt=""></a></li>
                        <li><a href="#"><img src="images/sm5.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/sm3.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/sm5.jpg" alt=""></a></li>
                        <!--<li><a href="#"><img src="images/sm3.jpg" alt=""></a></li>-->
                    </ul>
                </div>
            </div>

            <div class="rightArea">
                <div class="des_content ">
                    <h3 class="des_content_tit">计算机网络（第五版）</h3>
                    <div class="dl ">
                        <div class="dt">网站价</div>
                        <div class="dd"><span class="des_money">999.00</span><em style="font-size:18px">元</em></div><br>
                        <div class="dt">优惠</div>
                        <div class="dt" id="discount">满30元包邮</div><br><br>
                        <div class="dt">出版社</div>
                        <div class="dt" class="press">机械工业出版社</div><br><br>
                        <div class="dt">ISBN</div>
                        <div class="dt" class="ISBN">9787040238969</div><br><br>
                        <div class="dt">库存</div>
                        <div class="dt" class="quantity">100</div><br><br>
                        <div class="dt">新旧程度</div>
                        <div class="dt" clss="olddegree"><a title="9成新：使用痕迹不明显，无书写的文字">9成新</a></div><br><br>
                        <div class="dt">出版时间</div>
                        <div class="dt" class="pressDate">2018年12月</div><br><br>
                        <div class="dt">作者</div>
                        <div class="dt" class="author">谢仁希</div><br><br>
                    </div>
                    <div class="select">
                        <div class="SelectNum">
                            <div class="des_num">已选数量</div>
                            <input type="button" class="reduction" value="-"></input>
                            <div class="numInput">
                                <input id='selectNumber' type="text"  value="1">
                            </div>
                            <input  type="button" class="plus" value="+"></input><br><br>
                            <div class="addShopCar">
                                <input  type="button" value="加入购物车"></input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="detail-container"><h1 class="active" >商品详情</h1><h1><a href="#comment">商品评论</a></h1></div>
    <div class="introduce">
        <div class="book-img">
            <img src="images/计算机网络/计算机网络.jpg">
        </div>
        <div class="dl ">
            <div class="dt">网站价</div>
            <div class="dd"><span class="des_money">999.00</span><em style="font-size:18px">元</em></div><br>
            <div class="dt">出版社</div>
            <div class="dt" class="press">机械工业出版社</div><br><br>
            <div class="dt">ISBN</div>
            <div class="dt" class="ISBN">9787040238969</div><br><br>
            <div class="dt">库存</div>
            <div class="dt" class="quantity">100</div><br><br>
            <div class="dt">新旧程度</div>
            <div class="dt" class="olddegree"><a title="9成新：使用痕迹不明显，无书写的文字">9成新</a></div><br><br>
            <div class="dt">出版时间</div>
            <div class="dt" class="pressDate">2018年12月</div><br><br>
            <div class="dt">作者</div>
            <div class="dt" class="author">谢仁希</div><br><br>
            <div class="dt">书况说明</div>
            <div class="dt" class="condition" style="color: red">正版二手旧书，八成新左右，笔记无或很少，绝不影响阅读！</div><br><br>
            <div class="dt">特别提示</div>
            <div class="dt" class="tip" style="color: red">特别提示：正版二手旧书，绝无缺页少页，请放心购买！</div><br><br>
        </div><br><br>

        <div class="chapter">
            <h3 >章节信息</h3>
            <ul>
                第1章 概述<br /> 1.1 计算机网络在信息时代中的作用<br /> *1.2 因特网概述<br /> 1.2.1 网络的网络<br /> 1.2.2 因特网发展的三个阶段<br /> 1.2.3 因特网的标准化工作<br /> *1.3 因特网的组成<br /> 1.3.1 因特网的边缘部分<br /> 1.3.2 因特网的核心部分<br /> 1.4 计算机网络在我国的发展<br /> 1.5 计算机网络的类别<br /> 1.5.1 计算机网络的定义<br /> 1.5.2 几种不同类别的网络<br /> *1.6 计算机网络的性能<br /> 1.6.1 计算机网络的性能指标<br /> 1.6.2 计算机网络的非性能特征<br /> *1.7 计算机网络体系结构<br /> 1.7.1 计算机网络体系结构的形成<br /> 1.7.2 协议与划分层次<br /> 1.7.3 具有五层协议的体系结构<br /> 1.7.4 实体、协议、服务和服务访问点<br /> 1.7.5 TCP/IP的体系结构<br /> 习题<br />第2章 物理层<br />
            </ul>
        </div>
        <br/>
        <br/>
    </div>

    <div class="detail-container"><h1><a class="active" href="#comment">商品评论</a></h1></div>
    <div id="comment">
        <div class="score_box">
            <div class="score">
                <span>4.7</span><em>分</em>
            </div>
            <div class="score_speed">
                <ul class="score_speed_text">
                    <li class="speed_01">非常不满意</li>
                    <li class="speed_02">不满意</li>
                    <li class="speed_03">一般</li>
                    <li class="speed_04">满意</li>
                    <li>非常满意</li>
                </ul>
                <div class="score_num">
                    4.7<i></i>
                </div>
                <p>共18939位网友参与评分</p>
            </div>
        </div>
        <div class="review_tab">
            <ul class="review fl">
                <li><a href="#" class="active">全部</a></li>
                <li><a href="#">满意（17490）</a></li>
                <li><a href="#">一般（549）</a></li>
                <li><a href="#">不满意（743）</a></li>
            </ul>
            <div class="review_sort fr">
                <a href="#" class="review_time">时间排序</a>
                <a href="#" class="review_reco">推荐排序</a>
            </div>
        </div>

        <div class="review_listBox">

        </div>
    </div>


    <div class="back-to-top" style="display:none"><a>返回<br />顶部</a></div>

    <div class="footer">
        <p><a href="#">网站简介</a><i>|</i><a href="#">公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i> <a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
        <p>Copyright &copy; 2007 - 2018 版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
    </div>
</div>
</body>
</html>

<script>
    $(document).ready(function () {
        var name=sessionStorage.getItem('name');
        if(name!==null&&(name)!==undefined){
            if((/^[a-zA-Z0-9]{6,11}$/).test(name)){
                $('#hello2').hide();
                $('#hello  ').html('您好，'+name);
            }
        }
    })

    $('#shopnamespan').mouseover(function () {
        $('.shoplogo').slideToggle()
    })
    $('#shopnamespan').mouseout(function () {
        $('.shoplogo').slideToggle()
    })
    $('.reduction').click(function () {
        var number= $('#selectNumber').val()
        if(number>1){
            --number;
            $('#selectNumber').val(number)
        }
        else{
            $('#selectNumber').value=0
        }
    })
    $('.plus').click(function () {
        var number= $('#selectNumber').val()
        number++;
        $('#selectNumber').val(number)
    })

    $.ajax({
        type: 'get',
        url:'comment.json',
        dataType: 'json',
        success:function(res){
            $.each(res.comments, function(idx,val) {
                var str='<div class="review_list clearfix">\n' +
                    '                <div class="review_userHead fl">\n' +
                    '                    <div class="review_user">\n'
                str+="<img src="+ val.imgUrl+" alt="+"头像>"+"<p>"+val.userid+"</p>"+"</div>\n" +
                    "                </div>" +
                    "                <div class=\"review_cont\">" +
                    "                    <div class=\"review_t clearfix\">" +
                    "                        <div class=\"startBox fl\">" +
                    "                            <span class=\"start\"></span><span class=\"start\"></span><span class=\"start\"></span><span class=\"start\"></span>\n" +
                    "                        </div>" +
                    "                        <span class=\"starts_text fl\">"+val.socre+" 分满意</span>" +
                    "                    </div>" +
                    "                    <p>"+val.desc+"</p>" +
                    "                    <p><a href=\"#\" class=\"ding\">顶(0)</a><a href=\"#\" class=\"cai\">踩(0)</a></p>" +
                    "                </div>" +
                    "            </div>"
                $(".review_listBox").append(str)
            })
        }
    })

    $('.addShopCar  input').click(function () {
        var name=sessionStorage.getItem('name');
        if(name!==null&&(name)!==undefined){
            if((/^[a-zA-Z0-9]{6,11}$/).test(name)){
                id= window.location.href.split('?')[1].split('=')[1]
                number= $('#selectNumber').val()
                console.log(number)
                console.log(id)
                $.ajax({
                    url:'addShopCar.php',
                    type:'post',
                    data:{"id":id,"number":number},
                    success:function () {
                    }
                })
                $('.infodiv').show()
            }
        }
        else{
            $('.infodiv-1').show()
        }
    })

    $('.cancel').click(function () {
        $('.infodiv').hide()
    })

    jQuery(function ($) {
        //当滚动条的位置处于距顶部20像素以下时，跳转链接出现，否则消失
        $(window).scroll(function(){
            if (jQuery(window).scrollTop()>20){
                jQuery(".back-to-top").fadeIn(2000);
            }
            else
            {
                jQuery(".back-to-top").fadeOut(2000);
            }
        });

        //当点击跳转链接后，回到页面顶部位置

        jQuery(".back-to-top").click(function(){
            jQuery('body,html').animate({scrollTop:0},200);
            return false;
        });
    });
</script>